<template>
  <div>
    <h3 class="title">App组件</h3>
    <hr />
    <!-- <child /> -->
    <!-- 
      ref它可以实现组件通信，而且它还可以获取dom对象
     -->
    <!-- 使用ref来获取普通元素的dom对象 -->
    <!-- <div ref="username">张三</div> -->
    <!-- <button @click="getUsernameDom">获取张三dom</button> -->
    <ul>
      <li ref="lis" v-for="(item, index) in arr" :key="item">
        <span>{{ item }}</span> ---
        <span @click="del(index)">删除</span>
      </li>
    </ul>
  </div>
</template>

<script>
import child from './components/child1.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      age: 100,
      arr: [1, 2, 3]
    }
  },
  methods: {
    getUsernameDom() {
      // console.log(this.$refs['username'].innerHTML)
    },
    del(index) {
      // 获取li的dom列表 == 同步
      console.log(this.$refs['lis'])
      // 更新数据,异步渲染dom视图
      this.arr.splice(index, 1)
      // 用于获取最新的dom的方法  等待视图渲染完毕后才触发执行
      // vue它提供全个$nextTick方法,把可以把我们同步操作转为异步操作
      // 同时它还会把回调方法,提到渲染视图队列的队尾
      // 判断当前环境支持不支持微任务,用微任务,如果不支持就是宏任务
      this.$nextTick(()=>{
        console.log(this.$refs['lis'])
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
